<template>
  <div>
    <!-- 顶部内容 -->
    <div class="layout-editor-header">
      <div class="layout-editor-header__title"><span>编辑详情表单</span></div>
      <div class="layout-editor-header__right">
        <div class="layout-editor-header__devider"></div>
        <div class="ones-space ones-space-horizontal ones-space-align-center flex">
          <div class="ones-space-item">
            <a-button class="save btn">取消</a-button>
          </div>
          <div class="ones-space-item">
            <a-button class="save btn">发布</a-button>
          </div>
        </div>
      </div>
    </div>
    <!--下面内容 -->
    <div class="layout-editor-main">
      <!-- 下面左侧内容 -->
      <div class="layout-editor-main__side">
        <div class="layout-config">
          <div class="layout-config__title">详情表单配置</div>
          <!-- <div class="layout-config__section">
            <a-button class="save btn">默认值和是否必填</a-button>
          </div>
          <div class="layout-config__section">
            <a-button class="save btn">关键属性</a-button>
          </div> -->
        </div>
      </div>
      <!-- 下面中间内容 -->
      <div class="layout-editor-main__screen">
        <div style="display: flex; align-items: center; justify-content: center; width: 100%">
          <div style="width: 860px; height: 100%; flex: 0 0 860px; transform: scale(1); transform-origin: center top; will-change: transform">
            <div class="ui-task-detail ui-task-detail--wide">
              <div class="ui-task-detail__header">
                <div class="item-detail-panel-title flex-between">
                  <div class="item-title">
                    <p style="padding-left: 20px">#12343</p>
                  </div>
                  <div @click="btnFun(btnList, 'btn')">
                    <div class="flex item-btn">
                      <div v-for="(item, index) in btnList" :key="index">
                        <div v-if="item.isShow == true" style="padding: 0 10px">
                          <component :is="item.icon"></component>
                          {{ item.label }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <p class="item-detail-panel-desc">这是一条示例数据</p>
                <div class="item-key-field-list flex" @click="iconFun(iconList, 'icon')">
                  <div class="flex">
                    <div v-for="(item, index) in iconList" :key="index" class="flex">
                      <div v-if="item.isShow == true" class="flex" style="padding: 5px 20px; align-items: center">
                        <component :is="item.icon" style="font-size: 29px"></component>
                        <div style="margin-left: 10px">
                          <div>{{ item.label }}</div>
                          <div class="item-key-field-list-one">{{ item.type }}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- tab部分 -->
              <div class="ui-task-detail__container">
                <div class="ui-task-detail__main">
                  <div @click="tabFun(list, 'tab')">
                    <div class="flex tabs">
                      <div v-for="(item, index) in list" :key="index" class="flex">
                        <div v-if="item.isShow == true" :style="{ padding: '5px 20px', 'align-items': 'center', 'border-bottom': activeIndex == index ? '2px solid #096dd9' : '' }" class="flex" @click="clickIndex(index)">
                          <div>
                            <div>{{ item.label }}</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div v-for="(item, index) in list" :key="index" style="margin-top: 10px">
                    <component :is="item.url" v-if="activeIndex == index" @attribute-list="getList"></component>
                  </div>
                </div>
                <!-- 右侧活动及流转 -->
                <div class="ui-task-detail__side">
                  <a-tabs v-model:activeKey="activeKeyRight">
                    <a-tab-pane v-for="item in listRight" :key="item.id" disabled :tab="item.label">
                      <component :is="item.url" />
                    </a-tab-pane>
                  </a-tabs>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 下面右侧内容 -->
      <div class="layout-editor-main__side">
        <div v-if="reset">
          <div class="inspector__title inspector__title--sm">
            <div class="inspector__dismiss">
              <a-button class="layout-delete-button" type="text" @click="closeReset">
                <svg width="1em" height="1em" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="ones-icon ones-icon-non-scaling-stroke" stroke-width="2">
                  <path d="M8.007 8 12 4M8.007 8 12 12M8.007 8 4 12m4.007-4L4 4" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"></path>
                </svg>
              </a-button>
            </div>
            <span class="oac-max-w-[194px] oac-inline-block">关键属性卡片配置</span>
            <div class="inspector__subtitle">显示已配置的关键属性。</div>
          </div>
          <!-- <div class="inspector__section">
            <a-button class="ones-button ones-button-default ones-button-block">关键属性</a-button>
          </div> -->
          <div class="inspector-panel">
            <div class="inspector-panel__hd">
              <div class="inspector-panel__title"><span>快捷操作</span></div>
              <div class="inspector-panel__tool">
                <a-button v-if="position == 'btn'" type="link" @click="addOperation"><plus-square-two-tone />添加快捷操作</a-button>
                <a-button v-else-if="position == 'icon'" type="link" @click="addIcon"><plus-square-two-tone />添加快捷操作</a-button>
                <a-button v-else-if="position == 'tab'" type="link" @click="addList"><plus-square-two-tone />添加快捷操作</a-button>
                <a-button v-else-if="position == 'attr'" type="link" @click="attributeFun"><plus-square-two-tone />添加快捷操作111</a-button>
              </div>
            </div>
          </div>
          <div class="inspector-panel__bd">
            <span>在概要信息显示</span>
            <div v-if="position === 'btn'">
              <div class="layout-editor-sortable-group__hd">
                <draggable v-model="btnList" group="people" item-key="id" animation="600">
                  <!-- <div v-for="(item, index) in btnList" :key="index"> -->
                  <template #item="{ element }">
                    <div v-if="element.isShow == true" class="flex-between">
                      <div class="flex-rowr">
                        <holder-outlined />
                        <component :is="element.icon" style="margin: 0 10px"></component>
                        {{ element.label }}
                      </div>
                      <close-outlined style="cursor: pointer" @click="btnListDel(btnList, element)" />
                    </div>
                  </template>
                  <!-- </div> -->
                </draggable>
              </div>
            </div>
            <div v-if="position === 'icon'">
              <div class="layout-editor-sortable-group__hd">
                <div v-for="(item, index) in iconList" :key="index">
                  <div v-if="item.isShow == true" class="flex-between">
                    <div class="flex-rowr">
                      <holder-outlined />
                      <component :is="item.icon" style="margin: 0 10px"></component>
                      {{ item.label }}
                    </div>
                    <close-outlined style="cursor: pointer" @click="btnListDel(iconList, item)" />
                  </div>
                </div>
              </div>
            </div>
            <div v-if="position === 'tab'">
              <div class="layout-editor-sortable-group__hd">
                <div v-for="(item, index) in list" :key="index">
                  <div v-if="item.isShow == true" class="flex-between">
                    <div class="flex-rowr">
                      <holder-outlined />
                      {{ item.label }}
                    </div>
                    <close-outlined style="cursor: pointer" @click="btnListDel(list, item)" />
                  </div>
                </div>
              </div>
            </div>
            <div v-if="position === 'attr'">
              <div class="layout-editor-sortable-group__hd">
                <div v-for="(item, index) in attrList" :key="index">
                  <div v-if="item.isShow == true" class="flex-between">
                    <div class="flex-rowr">
                      <holder-outlined />
                      {{ item.label }}
                    </div>
                    <close-outlined style="cursor: pointer" @click="btnListDel(attrList, item)" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-else>
          <div class="layout-guide">
            <div class="layout-guide__title">操作引导</div>
            <ol class="layout-guide-list">
              <li class="layout-guide-list-item">
                <div class="layout-guide-list-item__title">1.标签页配置</div>
                <div class="layout-guide-list-item__desc">选中中栏，以查看或编辑模块标签页。</div>
                <div class="layout-guide-list-item__pic"><img src="@/assets/images/home/1.png" alt="引导1" /></div>
              </li>
              <li class="layout-guide-list-item">
                <div class="layout-guide-list-item__title">2.编辑属性</div>
                <div class="layout-guide-list-item__desc">选中属性卡片，以添加或删除属性、编辑属性的顺序。</div>
                <div class="layout-guide-list-item__pic">
                  <img
                    src=""
                    alt="引导2"
                  />
                </div>
              </li>
            </ol>
          </div>
        </div>
      </div>
    </div>
    <!-- 顶部按钮的增加 -->
    <addPop ref="addOperationPop" :btn-list="btnList" :arr-btn-list="arrBtnList" />
    <!-- 顶部icon的增加 -->
    <addPop ref="addIconPop" :btn-list="iconList" :arr-btn-list="arrBtnList" />
    <!-- tabs的增加 -->
    <addPop ref="addListPop" :btn-list="list" :arr-btn-list="arrBtnList" />
    <!-- attr的增加 -->
    <addPop ref="attrListPop" :btn-list="attrList" :arr-btn-list="arrBtnList" />
  </div>
</template>

<script setup lang="ts">
import XTModuleBIColumnar from "@/components/Business/XTModuleBI/XTModuleBIColumnar.vue"
import detail from "@/components/Business/XTModuleViewEditor/XTModuleTabs/detail.vue"
import activity from "@/components/Business/XTModuleViewEditor/XTModuleTabs/activity.vue"
import file from "@/components/Business/XTModuleViewEditor/XTModuleTabs/file.vue"
import beforeTask from "@/components/Business/XTModuleViewEditor/XTModuleTabs/beforeTask.vue"
import addPop from "@/components/Business/XTModuleViewEditor/XTModuleTabs/addOperationPop.vue"
import draggable from "vuedraggable"
const activeIndex = ref(0)

// tabs点击切换对应的内容
const clickIndex = (index: any) => {
  activeIndex.value = index
}
const attrList = ref<any>([])
//接受到的参数
const getList = (data1: any[]) => {
  attrList.value = data1
  debugger
  attrFun("attr")
}
const activeKeyRight = ref("1")
// 右上角关闭按钮
const reset = ref(false)
const closeReset = () => {
  reset.value = false
}
// tabs展示的list
const list = reactive([
  {
    label: "详情",
    value: "详情",
    url: detail,
    isShow: true,
    isCheck: false,
    isDisabled: false,
    id: 1,
  },
  {
    label: "前置依赖",
    value: "前置依赖",
    url: beforeTask,
    isShow: true,
    isCheck: false,
    isDisabled: false,
    id: 2,
  },
  {
    label: "后置影响",
    value: "后置影响",
    id: 3,
    isShow: true,
    isCheck: false,
    isDisabled: false,
    url: beforeTask,
  },
  {
    label: "文件",
    value: "文件",
    id: 4,
    url: file,
    isShow: true,
    isCheck: false,
    isDisabled: false,
  },
  {
    label: "子工作项",
    value: "子工作项",
    id: 5,
    isShow: true,
    isCheck: false,
    isDisabled: false,
    url: XTModuleBIColumnar,
  },
])
const listRight = reactive([
  {
    label: "活动",
    id: "1",
    url: activity,
  },
  {
    label: "流转",
    id: "2",
    url: activity,
  },
  {
    label: "任务审批",
    id: "3",
    url: activity,
  },
])
// icon动态加载  首先需要申明定义
const icon = ref("UserOutlined")
const icon1 = ref("right-circle-two-tone")
const icon2 = ref("calendar-two-tone")

// icon展示列表数据
const iconList = reactive([
  {
    label: "XXX",
    value: "XXX",
    icon: icon2,
    type: "负责人",
    url: "",
    isShow: true,
    isCheck: false,
    isDisabled: false,
    id: 1,
  },
  {
    label: "未选择",
    value: "未选择",
    icon: icon2,
    type: "当前状态",
    url: "",
    isShow: true,
    isCheck: false,
    isDisabled: false,
    id: 2,
  },
  {
    label: "未设置",
    value: "未设置",
    icon: icon2,
    type: "当前进度",
    url: "",
    isShow: true,
    isCheck: false,
    isDisabled: false,
    id: 3,
  },
  {
    label: "未设置",
    value: "未设置",
    icon: icon2,
    type: "发布日期",
    url: "",
    isShow: true,
    isCheck: false,
    isDisabled: false,
    id: 4,
  },
])
// btn展示列表数据
const btnList = reactive([
  {
    label: "超算",
    value: "超算",
    icon: icon,
    url: "",
    isShow: true,
    isCheck: false,
    isDisabled: false,
    id: 1,
  },
  {
    label: "设计工具",
    value: "设计工具",
    icon: icon2,
    url: "",
    isShow: true,
    isCheck: false,
    isDisabled: false,
    id: 2,
  },
  {
    label: "IP/PDK",
    value: "IP/PDK",
    icon: icon2,
    url: "",
    isShow: true,
    isCheck: false,
    isDisabled: false,
    id: 3,
  },
  {
    label: "项目文件柜",
    value: "项目文件柜",
    icon: icon2,
    url: "",
    isShow: true,
    isCheck: false,
    isDisabled: false,
    id: 4,
  },
  {
    label: "交付物",
    value: "交付物",
    icon: icon2,
    url: "",
    isShow: true,
    isCheck: false,
    isDisabled: false,
    id: 5,
  },
])
// 删除之后的Btn数组
const arrBtnList = ref([""])
// 删除之后的Icon数组
const arrIconList = ref([""])
// 删除之后的tab数组
const arrTabist = ref([""])
// 删除之后的attr数组
const arrAttrList = ref([""])
// 通过position变量判断右侧展示哪一块内容的list
const position = ref("")

// 展示icon的list
const iconFun = (item: any, positionType: string) => {
  position.value = positionType
  reset.value = true
}

// 展示icon的list
const btnFun = (item: any, positionType: string) => {
  position.value = positionType
  reset.value = true
}

// 展示tab的list
const tabFun = (item: any, positionType: string) => {
  position.value = positionType
  reset.value = true
}
// 展示attr的list
const attrFun = (positionType: string) => {
  position.value = positionType
  reset.value = true
}
// 设置一个数字判断删除的是否是最后一个
let activeNum = ref(0)
// 点击右侧叉号删数组的某一项
const btnListDel = (list: any[], item: any) => {
  list.map(item => {
    if (item.isShow == true) activeNum.value = activeNum.value + 1
  })
  if (activeNum.value !== 1) if (list.indexOf(item) > -1) list[list.indexOf(item)].isShow = false
}
// 打开右侧添加快捷方式弹窗---btn
const addOperationPop = ref()
const addOperation = () => {
  addOperationPop.value.showModal()
  arrBtnList.value.splice(0, arrBtnList.value.length)
  btnList.map(item => {
    if (item.isShow == true) {
      item.isDisabled = true
      arrBtnList.value.push(item.label)
      console.log(arrBtnList.value)
    }
  })
}
// 打开右侧添加快捷方式弹窗--icon
const addIconPop = ref()
const addIcon = () => {
  addIconPop.value.showModal()
  arrIconList.value.splice(0, arrIconList.value.length)
  iconList.map(item => {
    if (item.isShow == true) {
      item.isDisabled = true
      arrIconList.value.push(item.label)
      console.log(arrIconList.value)
    }
  })
}
// 打开右侧添加快捷方式弹窗--tabs
const addListPop = ref()
const addList = () => {
  addListPop.value.showModal()
  arrAttrList.value.splice(0, arrAttrList.value.length)
  list.map(item => {
    if (item.isShow == true) {
      item.isDisabled = true
      arrAttrList.value.push(item.label)
      console.log(arrAttrList.value)
    }
  })
}
// 打开右侧添加快捷方式弹窗--attr
const attrListPop = ref()
const attributeFun = () => {
  debugger
  attrListPop.value.showModal()
  arrAttrList.value.splice(0, arrTabist.value.length)
  attrList.value.map((item: { isShow: boolean; isDisabled: boolean; label: string }) => {
    if (item.isShow == true) {
      item.isDisabled = true
      arrTabist.value.push(item.label)
      console.log(arrTabist.value)
    }
  })
}
</script>
<style lang="less" scoped>
.layout-editor-header {
  position: relative;
  z-index: 5;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  height: 48px;
  padding: 0 20px;
  background-color: #fff;
  box-shadow: 0 3px 12px 0 rgb(48 48 48 / 5%), 0 4px 8px 0 rgb(48 48 48 / 10%), 0 0 1px 0 rgb(48 48 48 / 10%);
  .layout-editor-header__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    font-size: 18px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    color: #303030;
  }
  .layout-editor-header__right {
    display: flex;
    align-items: center;
  }
}
.layout-editor-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-flow: row nowrap;
  .layout-editor-main__side {
    width: 260px;
    padding: 20px 0;
    box-shadow: 0 3px 12px 0 rgb(48 48 48 / 5%), 0 4px 8px 0 rgb(48 48 48 / 10%), 0 0 1px 0 rgb(48 48 48 / 10%);
    background-color: #fff;
    z-index: 1;
    .layout-config {
      margin-bottom: 20px;
      padding-left: 20px;
      padding-right: 20px;
      .layout-config__title {
        font-size: 18px;
        font-weight: 500;
        line-height: 1.5;
        color: #303030;
      }
      .layout-config__title,
      .layout-config__section {
        margin-bottom: 10px;
      }
    }
  }
  .layout-editor-main__screen {
    flex: 1;
    padding: 10px 30px;
    overflow: auto;
    background: #dedede;
    .ui-task-detail--wide {
      height: 100%;
      display: flex;
      flex-flow: column;
      padding-bottom: 0px;
      border-left: 0;
      flex: 1 1 auto;
      position: relative;
      width: 100%;
      max-width: 100%;
      .ui-task-detail__header {
        // margin-bottom: 10px;
        border-radius: 3px;
        box-shadow: 0 0 2px 0 rgb(31 31 31 / 5%), 0 1px 2px 0 rgb(31 31 31 / 15%);
        background: #fff;
        .item-detail-panel-title {
          font-size: 16px;
          border-bottom: 1px solid #e8e8e8;
          .item-btn {
            border: 2px dashed rgb(154, 154, 154);
            cursor: pointer;
            padding: 10px;
            &:hover {
              background-color: rgba(51, 143, 229, 0.1);
            }
            p {
              margin: 0 10px;
            }
          }
        }
        .item-detail-panel-desc {
          font-size: 20px;
          padding: 5px 20px;
        }
        .item-key-field-list {
          border: dashed 2px #9a9a9a;
          cursor: pointer;
          &:hover {
            background-color: rgba(51, 143, 229, 0.1);
          }
          .flex-rowl {
            margin: 10px 20px;
            .item-key-field-list-one {
              color: #9a9a9a;
              font-size: 12px;
            }
            div {
              margin-left: 5px;
            }
          }
        }
      }
      .ui-task-detail__container {
        margin-top: 10px;
        // background: #fff;
        display: flex;
        flex-flow: row nowrap;
        align-items: stretch;
        flex: 1;
        min-height: 0;
        .ui-task-detail__main {
          flex: 1 1 68%;
          min-width: 400px;
          margin-right: 10px;
          // padding: 0 20px;
          background: #fff;
          .tabs {
            border: dashed 2px #9a9a9a;
            cursor: pointer;
            padding: 5px 0;
            &:hover {
              background-color: rgba(51, 143, 229, 0.1);
            }
          }
        }
        .ui-task-detail__side {
          min-width: 240px;
          max-width: 460px;
          flex: 0 0 32%;
          padding: 0 20px;
          background: #fff;
        }
      }
    }
  }
  .layout-editor-main__side {
    width: 260px;
    padding: 20px px 0;
    box-shadow: 0 3px 12px 0 rgb(48 48 48 / 5%), 0 4px 8px 0 rgb(48 48 48 / 10%), 0 0 1px 0 rgb(48 48 48 / 10%);
    background-color: #fff;
    z-index: 1;
    div {
      .inspector__title {
        position: relative;
        font-size: 18px;
        font-weight: 500;
        line-height: 1.5;
        color: #303030;
        margin-bottom: 20px;
        padding-left: 20px;
        padding-right: 20px;
        .inspector__dismiss {
          position: absolute;
          top: -1px;
          right: 20px;
        }
        .inspector__subtitle {
          font-size: 14px;
          line-height: 1.43;
          margin-top: 5px;
          color: #909090;
          font-weight: normal;
        }
      }
      .inspector-panel {
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-flow: column;
        .inspector-panel__hd {
          display: flex;
          flex-flow: row nowrap;
          align-items: center;
          padding-left: 20px;
          padding-right: 20px;
          .inspector-panel__title {
            font-size: 15px;
            font-weight: 500;
            line-height: 1.47;
            color: #303030;
            flex: 1;
            white-space: nowrap;
          }
          .inspector-panel__tool {
            position: relative;
            right: -10px;
          }
        }
      }
      .inspector-panel__bd {
        padding: 5px 20px;
        font-size: 12px;
        color: #909090;
        .layout-editor-sortable-group__hd {
          color: #000;
          cursor: all-scroll;
          font-size: 17px;
          margin-top: 10px;
        }
      }
      .inspector__section {
        padding-left: 20px;
        padding-right: 20px;
        margin-bottom: 20px;
        .ones-button-block {
          width: 100%;
        }
      }
    }
    .layout-guide {
      padding-left: 20px;
      padding-right: 20px;
      .layout-guide__title {
        margin-bottom: 20px;
        font-size: 18px;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.5;
        letter-spacing: normal;
        color: #303030;
      }
      .layout-guide-list {
        padding: 0;
        margin: 0;
        list-style: none;
        .layout-guide-list-item {
          padding-left: 15px;
          .layout-guide-list-item__title {
            font-size: 15px;
            font-weight: 500;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.47;
            letter-spacing: normal;
            color: #303030;
            margin-left: -15px;
          }
          .layout-guide-list-item__desc {
            font-size: 14px;
            font-weight: normal;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.43;
            letter-spacing: normal;
            color: #606060;
          }
          .layout-guide-list-item__pic {
            margin: 10px 0 20px;
            box-shadow: 0 0 1px 0 silver, 0 4px 8px 0 silver, 0 3px 12px 0 silver;
          }
        }
      }
    }
  }
}
</style>
<style scoped>
.ui-task-detail__main:deep(.ant-tabs-nav-wrap) {
  border: 2px dashed rgb(154, 154, 154);
  padding: 0 20px;
  cursor: pointer;
}
.ui-task-detail__main:deep(.ant-tabs-nav-wrap):hover {
  background-color: rgba(51, 143, 229, 0.1);
}
</style>
